<template>
  <div class="mainsu">
    <div class="main_spac1">
      <div class="main_white padding10">
        <!-- 表单 -->
        <div class="batch-wrap mg-b-8 mg-t-6">
          <el-form
            :inline="true"
            :model="form"
            class="demo-form-inline"
            ref="userListFrom"
            label-width="90px"
            id="form"
          >
            <div class="search_top">
              <div class="time_change">
                <div class="search_left">
                  <change-date
                    @getdate="getdate"
                    ref="time_change_ref"
                  ></change-date>
                </div>
                <div class="search_right">
                  <el-form-item label="商品：" prop="goods_spu_id">
                    <change-goods-input
                      ref="changeGoodsInput"
                      @clear="clearGoods"
                      @sendValue="
                        (data) => {
                          this.form.goods_spu_id = data.id;
                          this.getArticleList();
                        }
                      "
                    ></change-goods-input>
                  </el-form-item>
                  <el-form-item label="商品分类：" prop="line_id">
                    <el-cascader
                      v-model="form.category_id"
                      :options="categoryList"
                      :props="defaultProps"
                      @change="getArticleList"
                    ></el-cascader>
                  </el-form-item>
                  <MainFormBtn @reset="reset" @getSearchFor="getArticleList" :loading="listLoading" :showBtn="false">
                    <el-button @click="exportStockList">导出</el-button>
                  </MainFormBtn>
                </div>
              </div>
            </div>
          </el-form>
        </div>
        <!-- 筛选条件 -->
        <div class="flex-btw" style="margin: 0 0 14px 0; position: relative">
          <div></div>
          <div class="flex-checkout mg-t-6">
            <el-checkbox
              v-model="form.show_last_stock"
              true-label="1"
              false-label="2"
              @change="
                (val) => {
                  checkboxChange(val, 'show_last_stock');
                }
              "
              >查询本期期初库存</el-checkbox
            >
            <el-tooltip class="item mg-r-16 mg-l-6" effect="dark" placement="bottom">
              <div slot="content">
                勾选之后，当前所有的商品期初库存直接抓取近一次结余期末库存
              </div>
              <svg aria-hidden="true" class="navbar_svg" width="16" height="16">
                <use xlink:href="#icon-summary_question" />
              </svg>
            </el-tooltip>
            <el-checkbox
              v-model="form.show_has_inout"
              true-label="1"
              false-label="2"
              @change="
                (val) => {
                  checkboxChange(val, 'show_has_inout');
                }
              "
            >
              仅展示查询日期内有出入库流水的商品</el-checkbox
            >
          </div>
        </div>
        <div class="main_table">
          <!-- 表格 -->
          <el-table
            ref="multipleTable"
            v-loading="listLoading"
            :data="list"
            element-loading-text="加载中"
            fit
            border
            :header-cell-class-name="this.$verticaline"
            :height="borderHeight"
            :header-cell-style="tableHeightStyle"
            @header-dragend="changeTableWidth"
          >
            <el-table-column
              label="商品名称"
              fixed
              align="center"
              prop="name"
              :min-width="tableWidth[hash + 'name'] || 180"
              show-overflow-tooltip
            />
            <el-table-column
              label="库存单位"
              fixed
              align="center"
              prop="unit"
              :width="tableWidth[hash + 'unit']"
              show-overflow-tooltip
            >
              <template slot-scope="{ row }">
                {{ row.spu_name || row.unit }}
              </template>
            </el-table-column>
            <el-table-column
              label="一级分类名称"
              align="center"
              prop="category_p_name"
              :width="tableWidth[hash + 'category_p_name'] || 120"
              show-overflow-tooltip
            />
            <el-table-column
              label="二级分类名称"
              align="center"
              prop="category_name"
              :width="tableWidth[hash + 'category_name'] || 120"
              show-overflow-tooltip
            />
            <el-table-column
              label="期初库存"
              show-overflow-tooltip
              align="center"
            >
              <el-table-column
                :key="stock_text"
                prop="opening_stock"
                :width="tableWidth[hash + 'opening_stock'] || 110"
                show-overflow-tooltip
                align="center"
              >
                <template slot="header">
                  <div class="flex">
                    期初库存
                    <el-tooltip
                      class="maincg_uli_s el-icon-question table-msg"
                      :content="stock_text"
                      placement="bottom"
                    >
                      <i class="navbar_svg new_navbar_svg">
                        <use xlink:href="#icon-summary_question" />
                      </i>
                    </el-tooltip>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="opening_avg_money"
                :width="tableWidth[hash + 'opening_avg_money'] || 100"
                show-overflow-tooltip
                align="center"
              >
                <template slot="header">
                  <div class="flex">
                    期初均价
                    <el-tooltip
                      class="maincg_uli_s el-icon-question table-msg"
                      content="成本金额/期初库存"
                      placement="bottom"
                    >
                      <i class="navbar_svg new_navbar_svg">
                        <use xlink:href="#icon-summary_question" />
                      </i>
                    </el-tooltip>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="opening_money"
                :width="tableWidth[hash + 'opening_money'] || 100"
                show-overflow-tooltip
                align="center"
                :key="money_text"
              >
                <template slot="header">
                  <div class="flex">
                    期初金额
                    <el-tooltip
                      class="maincg_uli_s el-icon-question table-msg"
                      :content="money_text"
                      placement="bottom"
                    >
                      <i class="navbar_svg new_navbar_svg">
                        <use xlink:href="#icon-summary_question" />
                      </i>
                    </el-tooltip>
                  </div>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column
              label="本期入库"
              show-overflow-tooltip
              align="center"
            >
              <el-table-column
                prop="storage_num"
                :width="tableWidth[hash + 'storage_num'] || 100"
                show-overflow-tooltip
                align="center"
              >
                <template slot="header">
                  <div class="flex">
                    入库数量
                    <el-tooltip
                      class="maincg_uli_s el-icon-question table-msg"
                      content="筛选时间内发生的采购入库、其他入库、订单退货、单位转换、期初入库、分割入库业务中实际入库数量合计"
                      placement="bottom"
                    >
                      <i class="navbar_svg new_navbar_svg">
                        <use xlink:href="#icon-summary_question" />
                      </i>
                    </el-tooltip>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="storage_avg_money"
                :width="tableWidth[hash + 'storage_avg_money'] || 100"
                show-overflow-tooltip
                align="center"
              >
                <template slot="header">
                  <div class="flex">
                    入库均价
                    <el-tooltip
                      class="maincg_uli_s el-icon-question table-msg"
                      content="入库金额/入库数量"
                      placement="bottom"
                    >
                      <i class="navbar_svg new_navbar_svg">
                        <use xlink:href="#icon-summary_question" />
                      </i>
                    </el-tooltip>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                label="入库金额"
                prop="storage_money"
                :width="tableWidth[hash + 'storage_money'] || 100"
                show-overflow-tooltip
                align="center"
              >
                <template slot="header">
                  <div class="flex">
                    入库金额
                    <el-tooltip
                      class="maincg_uli_s el-icon-question table-msg"
                      content="筛选时间内发生的采购入库、其他入库、订单退货、单位转换、期初入库、分割入库业务中实际入库金额合计"
                      placement="bottom"
                    >
                      <i class="navbar_svg new_navbar_svg">
                        <use xlink:href="#icon-summary_question" />
                      </i>
                    </el-tooltip>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                prop="storage_operation"
                :width="tableWidth[hash + 'storage_operation']"
                show-overflow-tooltip
                align="center"
              >
                <template slot-scope="{ row }">
                  <el-link
                    type="primary"
                    @click="definite(row.spu_id || row.id, 1)"
                    >明细</el-link
                  >
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="本期出库" align="center">
              <el-table-column
                prop="stock_out_num"
                :width="tableWidth[hash + 'stock_out_num'] || 100"
                show-overflow-tooltip
                align="center"
              >
                <template slot="header">
                  <div class="flex">
                    出库数量
                    <el-tooltip
                      class="maincg_uli_s el-icon-question table-msg"
                      content="在查询日期内审核且类型不是报损出库的出库单的出库数量合计"
                      placement="bottom"
                    >
                      <i class="navbar_svg new_navbar_svg">
                        <use xlink:href="#icon-summary_question" />
                      </i>
                    </el-tooltip>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="stock_avg_out_money"
                :width="tableWidth[hash + 'stock_avg_out_money'] || 100"
                show-overflow-tooltip
                align="center"
              >
                <template slot="header">
                  <div class="flex">
                    出库均价
                    <el-tooltip
                      class="maincg_uli_s el-icon-question table-msg"
                      content="出库金额/出库数量"
                      placement="bottom"
                    >
                      <i class="navbar_svg new_navbar_svg">
                        <use xlink:href="#icon-summary_question" />
                      </i>
                    </el-tooltip>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="stock_out_money"
                :width="tableWidth[hash + 'stock_out_money'] || 100"
                show-overflow-tooltip
                align="center"
              >
                <template slot="header">
                  <div class="flex">
                    出库成本
                    <el-tooltip
                      class="maincg_uli_s el-icon-question table-msg"
                      content="筛选时间内发生的销售出库、其他出库、采购退货、单位转换、分割出库业务中实际出库金额合计"
                      placement="bottom"
                    >
                      <i class="navbar_svg new_navbar_svg">
                        <use xlink:href="#icon-summary_question" />
                      </i>
                    </el-tooltip>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                prop="stock_operation"
                :width="tableWidth[hash + 'stock_operation']"
                show-overflow-tooltip
                align="center"
              >
                <template slot-scope="{ row }">
                  <el-link
                    type="primary"
                    @click="definite(row.spu_id || row.id, 2)"
                    >明细</el-link
                  >
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="本期报溢" align="center">
              <el-table-column
                prop="baoyi_storage_num"
                :width="tableWidth[hash + 'baoyi_storage_num'] || 100"
                show-overflow-tooltip
                align="center"
              >
                <template slot="header">
                  <div class="flex">
                    报溢数量
                    <el-tooltip
                      class="maincg_uli_s el-icon-question table-msg"
                      content="筛选时间内发生的手动报溢与盘点报溢的数量合计"
                      placement="bottom"
                    >
                      <i class="navbar_svg new_navbar_svg">
                        <use xlink:href="#icon-summary_question" />
                      </i>
                    </el-tooltip>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="baoyi_avg_storage_money"
                :width="tableWidth[hash + 'baoyi_avg_storage_money'] || 100"
                show-overflow-tooltip
                align="center"
              >
                <template slot="header">
                  <div class="flex">
                    报溢均价
                    <el-tooltip
                      class="maincg_uli_s el-icon-question table-msg"
                      content="报溢金额/报溢数量"
                      placement="bottom"
                    >
                      <i class="navbar_svg new_navbar_svg">
                        <use xlink:href="#icon-summary_question" />
                      </i>
                    </el-tooltip>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="baoyi_storage_money"
                :width="tableWidth[hash + 'baoyi_storage_money'] || 100"
                show-overflow-tooltip
                align="center"
              >
                <template slot="header">
                  <div class="flex">
                    报溢金额
                    <el-tooltip
                      class="maincg_uli_s el-icon-question table-msg"
                      content="筛选时间内发生的手动报溢与盘点报溢的金额合计"
                      placement="bottom"
                    >
                      <i class="navbar_svg new_navbar_svg">
                        <use xlink:href="#icon-summary_question" />
                      </i>
                    </el-tooltip>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                prop="baoyi_operation"
                :width="tableWidth[hash + 'baoyi_operation']"
                show-overflow-tooltip
                align="center"
              >
                <template slot-scope="{ row }">
                  <el-link
                    type="primary"
                    @click="definite(row.spu_id || row.id, 5)"
                    >明细</el-link
                  >
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="本期报损" align="center">
              <el-table-column
                prop="baosun_storage_num"
                :width="tableWidth[hash + 'baosun_storage_num'] || 100"
                show-overflow-tooltip
                align="center"
              >
                <template slot="header">
                  <div class="flex">
                    报损数量
                    <el-tooltip
                      class="maincg_uli_s el-icon-question table-msg"
                      content="筛选时间内发生的手动报损、盘点报损与退货报损的数量合计"
                      placement="bottom"
                    >
                      <i class="navbar_svg new_navbar_svg">
                        <use xlink:href="#icon-summary_question" />
                      </i>
                    </el-tooltip>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="baosun_avg_storage_money"
                :width="tableWidth[hash + 'baosun_avg_storage_money'] || 100"
                show-overflow-tooltip
                align="center"
              >
                <template slot="header">
                  <div class="flex">
                    报损均价
                    <el-tooltip
                      class="maincg_uli_s el-icon-question table-msg"
                      content="报损金额/报损数量"
                      placement="bottom"
                    >
                      <i class="navbar_svg new_navbar_svg">
                        <use xlink:href="#icon-summary_question" />
                      </i>
                    </el-tooltip>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="baosun_storage_money"
                :width="tableWidth[hash + 'baosun_storage_money'] || 100"
                show-overflow-tooltip
                align="center"
              >
                <template slot="header">
                  <div class="flex">
                    报损金额
                    <el-tooltip
                      class="maincg_uli_s el-icon-question table-msg"
                      content="筛选时间内发生的手动报损、盘点报损与退货报损的金额合计"
                      placement="bottom"
                    >
                      <i class="navbar_svg new_navbar_svg">
                        <use xlink:href="#icon-summary_question" />
                      </i>
                    </el-tooltip>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                prop="baosun_operation"
                :width="tableWidth[hash + 'baosun_operation']"
                show-overflow-tooltip
                align="center"
              >
                <template slot-scope="{ row }">
                  <el-link
                    type="primary"
                    @click="definite(row.spu_id || row.id, 12)"
                    >明细</el-link
                  >
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="期末结余" align="center">
              <el-table-column
                prop="closing_stock"
                :width="tableWidth[hash + 'closing_stock'] || 100"
                show-overflow-tooltip
                align="center"
              >
                <template slot="header">
                  <div class="flex">
                    期末库存
                    <el-tooltip
                      class="maincg_uli_s el-icon-question table-msg"
                      content="期末库存取查询结束日期最终的库存数据"
                      placement="bottom"
                    >
                      <i class="navbar_svg new_navbar_svg">
                        <use xlink:href="#icon-summary_question" />
                      </i>
                    </el-tooltip>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="closing_avg_money"
                :width="tableWidth[hash + 'closing_avg_money'] || 100"
                show-overflow-tooltip
                align="center"
              >
                <template slot="header">
                  <div class="flex">
                    期末均价
                    <el-tooltip
                      class="maincg_uli_s el-icon-question table-msg"
                      content="期末金额/期末数量"
                      placement="bottom"
                    >
                      <i class="navbar_svg new_navbar_svg">
                        <use xlink:href="#icon-summary_question" />
                      </i>
                    </el-tooltip>
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="closing_money"
                :width="tableWidth[hash + 'closing_money'] || 100"
                show-overflow-tooltip
                align="center"
              >
                <template slot="header">
                  <div class="flex">
                    期末金额
                    <el-tooltip
                      class="maincg_uli_s el-icon-question table-msg"
                      content="期末金额取查询结束日期最终的库存金额"
                      placement="bottom"
                    >
                      <i class="navbar_svg new_navbar_svg">
                        <use xlink:href="#icon-summary_question" />
                      </i>
                    </el-tooltip>
                  </div>
                </template>
              </el-table-column>
            </el-table-column>
          </el-table>
        </div>
        <div class="main_page boxdq">
          <div></div>
          <!-- 分页 -->
          <div class="main_page_r">
            <MainPagination
              :current-page="current.page"
              :page-sizes="[20, 50, 100, 200]"
              :page-size="current.per_page"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalCount"
              background
              @size-change="changeLimit"
              @current-change="changePage"
            />
          </div>
        </div>
      </div>
    </div>
    <!-- 明细抽屉 -->
    <definite-drawer ref="definiteDrawer"></definite-drawer>
  </div>
</template>

<script>
import { stpckLog_index, exportStockList } from "@/api/report/inventory";
import { packApi } from "@/utils/public";
import { mixins } from "@/mixins/index.js";
import changeDate from "./lossReport/changeDate.vue";
import definiteDrawer from "./components/definiteDrawer.vue";
import { exportMethod, recursion, category } from "@/utils/index";
export default {
  mixins: [mixins],
  components: { changeDate, definiteDrawer },
  watch: {
    "form.show_last_stock": {
      handler(val) {
        this.stock_text =
          val == 2 ? "查询日期前一天的期初库存数量" : "查询近一次期初库存数量";
        this.money_text =
          val == 2
            ? "查询日期前一天最终的成本金额"
            : "查询近一次最终的成本金额";
      },
      immediate: true,
    },
  },
  data() {
    return {
      //日期
      date: [],
      // 分页
      current: {
        page: 1,
        per_page: 20,
      },
      stock_text: "查询日期前一天的期初库存数量",
      money_text: "查询日期前一天最终的成本金额",
      totalCount: 1,
      // 更多
      moredata: false,
      // 列表数据
      list: [],
      categoryList: [], // 分类数组
      defaultProps: {
        children: "selfNext",
        label: "title",
        value: "id",
        checkStrictly: true,
      },
      listLoading: false, // 加载loading
      // 搜索
      form: {
        goods_spu_id: "", // 商品规格id
        category_id: "", // 分类id
        pid: "", // 主分类id
        start_time: "", // 开始时间
        end_time: "", // 结束时间
        show_last_stock: localStorage.getItem("show_last_stock") || "2", // 查询上一次期初库存
        show_has_inout: localStorage.getItem("show_has_inout") || "1", //仅展示查询日期内有出入库流水的商品
      },
    };
  },
  mounted() {
    // 列表
    this.getNumerical(230);
    this.stpckLog_index();
  },
  methods: {
    // 清楚商品id
    clearGoods() {
      this.form.goods_spu_id = "";
    },
    // 获取时间
    getdate(val) {
      this.date = val;
      this.stpckLog_index();
    },
    // 敲击键盘回车键时调用的搜索回调
    startGetting() {
      this.getArticleList();
    },

    // 搜索
    getArticleList() {
      this.current.page = 1;
      this.stpckLog_index();
    },
    // 重置
    reset() {
      this.$refs["userListFrom"].resetFields();
      this.$refs["changeGoodsInput"].name = "";
      this.form.category_id = "";
      this.$refs.time_change_ref.quickChnage(2);
      this.stpckLog_index();
    },
    // 更多
    more() {
      this.moredata = !this.moredata;
    },
    // 分页
    changeLimit(pageSize) {
      this.current.per_page = pageSize;
      this.stpckLog_index();
    },
    changePage(page) {
      this.current.page = page;
      this.stpckLog_index();
    },
    // 列表
    stpckLog_index() {
      this.listLoading = true;
      this.date = this.$refs["time_change_ref"].$data.date;
      let data = packApi({
        ...this.list_form(),
        ...this.current,
      });
      stpckLog_index(data).then((res) => {
        this.listLoading = false;
        if (res.errcode == 0) {
          this.list = res.data.list;
          this.totalCount = res.data.total;
          this.categoryList = recursion(res.data.categoryList, true);
          this.$refs['multipleTable'].doLayout();
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    list_form() {
      let form = JSON.parse(JSON.stringify(this.form));
      form.pid = form.category_id[0] ? form.category_id[0] : "";
      form.category_id = category(form.category_id);
      form.start_time = this.date[0];
      form.end_time = this.date[1];
      return form;
    },
    // 明细
    definite(spu_id, type) {
      let data = {
        start_time: this.date[0],
        end_time: this.date[1],
        query_type: type,
        goods_spu_id: spu_id,
      };
      this.$refs.definiteDrawer.open(data);
    },
    // 导出
    exportStockList() {
      let data = {
        type: 7,
        ...this.list_form()
      };
      this.$store.dispatch("user/exportData", data)
    },
    // 修改选择框
    checkboxChange(val, key) {
      localStorage.setItem(key, val);
      this.$message.success("设置成功");
      this.stpckLog_index();
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";
/deep/.el-date-editor {
  width: 220px;
  .el-range-input {
    width: 36.5%;
  }
}
.mg-b-8 {
  margin-bottom: 6px;
}
.search_top {
  width: 100%;
  background-color: #fff;
}
.time_change {
  width: 100%;
  height: 32px;
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
}

.search_right {
  display: flex;
  align-items: center;
  /deep/ .el-form-item {
    margin-bottom: 0;
  }
  .more {
    color: $colour_18;
    font-size: $font_14;
    margin-left: 10px;
    i {
      font-size: 16px;
      font-weight: bold;
      margin-left: 5px;
      vertical-align: -1px;
      &.on {
        transform: rotate(180deg);
      }
    }
    &:hover {
      cursor: pointer;
    }
  }
}
.flex-checkout {
  display: flex;
  align-items: center;
  .el-checkbox {
    margin: 0;
  }
}
</style>